<template>
	<view :class="type == 2 ? 'top_pad' :''">
		<view class="top_tips"  v-if="type == 1">
			<view class="tips">
				修改密码
			</view>
			请输入手机号码和验证码修改密码
		</view>
		<view class="main">
			<view v-if="type == 1">
				<view class="main_title">
					手机号码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.account" class="ipt" type="text" placeholder="请输入手机号码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;" :disabled="true">
				</view>
				
				<view class="main_title">
					验证码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.captcha" class="ipt" type="text" placeholder="请输入验证码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
					<button class="captcha" :plain="true" @click="sendMsg()" :loading="sendVerifyLoad">
						{{sendVerifyLoad?`${downTime}S`:'获取验证码'}}</button>
				</view>
				<view class="main_title">
					请输入旧密码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.oldPassword" class="ipt" type="password" placeholder="请输入旧密码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
				</view>
				<view class="main_title">
					请输入新密码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.password" class="ipt" type="password" placeholder="6-20位字符，可使用数字、字母或符号的组合"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
				</view>
				<view class="main_title">
					请再次请输入新密码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.password2" class="ipt" type="password" placeholder="6-20位字符，可使用数字、字母或符号的组合"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
				</view>
			</view>
			<view v-if="type == 2">
				<view class="main_title">
					手机号码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.account" class="ipt" type="text" placeholder="请输入手机号码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;" :disabled="true">
				</view>
				<view class="main_title">
					验证码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.captcha" class="ipt" type="text" placeholder="请输入手机验证码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
					<button class="captcha" :plain="true" @click="sendMsg()" :loading="sendVerifyLoad">
						{{sendVerifyLoad?`${downTime}S`:'获取验证码'}}</button>
				</view>
				<view class="main_title">
					请输入旧密码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.oldPassword" class="ipt" type="password" placeholder="请输入旧密码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
				</view>
				<view class="main_title">
					请输入支付密码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.password" class="ipt" type="password" placeholder="请输入新支付密码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
				</view>
				<view class="main_title">
					请输入再次输入新的支付密码
				</view>
				<view class="iptBox flex-between">
					<input v-model="form.password2" class="ipt" type="password" placeholder="请再次输入新支付密码"
						placeholder-style="color: #b6b6b6;font-size: 32rpx;">
				</view>
			</view>



			<button class="btn" @click="edit">完成</button>
			<view class="tips_foot">
				---------- 技术支持：伯贝网络有限公司 ---------
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "", // 1:密码；2：支付密码
				form: {
					account: "",
					captcha: "",
					oldPassword: "",
					password: "",
					password2: "",
				},
				time: null,
				downTime: 60,
				sendVerifyLoad: false
			}
		},
		onLoad(option) {
			this.type = option.type;
			if (option.type == 1) {
				uni.setNavigationBarTitle({
					title: "修改密码",
				})
			} else {
				uni.setNavigationBarTitle({
					title: "修改支付密码",
				})
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$post({
					module: "User",
					interface: "1000",
				}).then(res => {
					this.form.account = res.account;
				})
			},
			sendMsg() {
				if (this.sendVerifyLoad) {
					uni.showToast({
						title: `请等待${this.downTime}s后继续操作`,
						icon: "none",
						duration: 1500,
					})
					return
				}
				this.sendVerifyLoad = true
				let time = setInterval(() => {
					this.downTime--;
					if (this.downTime <= 0) {
						this.downTime = 60;
						this.sendVerifyLoad = false;
						clearTimeout(time);
					}
				}, 1000);
				if (this.type == 1) {
					// console.log("修改密码")
					this.$post({
						module: 'User',
						interface: 2002,
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1500,
						})
					})
				} else if (this.type == 2) {
					this.$post({
						module: 'User',
						interface: 2003,
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1500,
						})
					})
				}

			},
			edit() {
				if (this.type == 1) {
					if (!this.form.captcha) {
						uni.showToast({
							title: "请输入手机验证码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (!this.form.oldPassword) {
						uni.showToast({
							title: "请输入旧密码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (!this.form.password) {
						uni.showToast({
							title: "请输入新密码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (!this.form.password2) {
						uni.showToast({
							title: "请再次输入新密码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (this.form.password != this.form.password2) {
						uni.showToast({
							title: "新密码输入不一致",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					this.$post({
						module: 'User',
						interface: 2100,
						data: {
							captcha: this.form.captcha,
							oldPassword: this.form.oldPassword,
							password: this.form.password,
						},
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1500,
						})
						setTimeout(() => {
							uni.removeStorageSync('token');
							uni.reLaunch({
								url: "/pages/login/index"
							})
						}, 1000)
					})
				} else {
					if (!this.form.captcha) {
						uni.showToast({
							title: "请输入手机验证码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (!this.form.oldPassword) {
						uni.showToast({
							title: "请输入旧密码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (!this.form.password) {
						uni.showToast({
							title: "请输入新支付密码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (!this.form.password2) {
						uni.showToast({
							title: "请再次输入新支付密码",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					if (this.form.password != this.form.password2) {
						uni.showToast({
							title: "支付密码输入不一致",
							icon: "none",
							duration: 1500,
						})
						return;
					}
					this.$post({
						module: 'User',
						interface: 2005,
						data: {
							captcha: this.form.captcha,
							oldSafeword: this.form.oldPassword,
							safeword: this.form.password,
						},
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 1500,
						})
						setTimeout(() => {
							this.goBack();
						}, 1000)
					})
				}

			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.top_pad {
		padding-top: 20rpx;
	}
	.top_tips {
		height: 162rpx;
		padding: 40rpx 30rpx;
		color: #999999;
		.tips {
			font-size: 40rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;
			margin-bottom: 10rpx;
		}
	}
	.main {
		padding: 10rpx 30rpx;
		background: linear-gradient(180deg, #FFF5F4 0%, #FFFFFF 14%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		opacity: 1;
		.main_title {
			font-size: 28rpx;
			font-family: 蘋方-簡-標準體, 蘋方-簡;
			font-weight: normal;
			color: #120C45;
			margin: 25rpx 0;
		}

		.iptBox {
			height: 100rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(212,212,212,0.25);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			// height: 104rpx;
			// background: rgba(191, 191, 191, 0.1);
			// border-radius: 52rpx;
			// margin-top: 48rpx;
			// padding: 0 36rpx;

			.ipt {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 44rpx;
			}

			.captcha {
				width: 168rpx;
				height: 46rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				border: 2rpx solid #D7D7D7;
				padding: 0;
				margin: 0;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
			}
		}

		.btn {
			height: 104rpx;
			background: #F2615F;
			border-radius: 52rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			margin: 140rpx 0 0;
			padding: 0;
		}
		.tips_foot {
			text-align: center;
			height: 22rpx;
			font-size: 16rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #7A797A;
			margin-top: 20rpx;
		}


	}
</style>
